<template>
  <el-dialog :modal="false" :title="title" :visible.sync="dialogVisible" width="1100px" :before-close="handleClose">
    <div class="userselect row">
      <section class="left">
        <div class="search">
          <el-input v-model="roleName" placeholder="请输入角色名称"> </el-input>
          <div class=" searchicon el-icon-search" @click="seachMan()"></div>
        </div>
        <div class="tree">
          <el-tree
            :data="treedata"
            :props="defaultProps"
            node-key="deptId"
            :default-expanded-keys="defDeptId"
            :default-checked-keys="defDeptId"
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span class="tree-list">
                <div v-if="data.list" class="ismenu"></div>
                <div v-if="!data.list" class="isunit"></div>
                {{ node.label }}
              </span>
            </span>
          </el-tree>
        </div>
        <p>用户</p>
        <div class="userlist">
          <div
            v-for="item in userlist"
            :key="item.userId"
            :class="{ usersactive: item.active }"
            class="users"
            @click="adduserlistSP(item)"
            @dblclick="pushone(item)"
          >
            {{ item.realName }}
          </div>
          <div v-if="!userlist || (userlist && userlist.length < 1)" class="userempty">此部门暂无可选用户数据</div>
        </div>
      </section>
      <section class="tooog">
        <div class="">
          <div class="toleft" @click="removedata"></div>
          <div class="toright" @click="pushdata"></div>
        </div>
      </section>
      <section class="right">
        <div class="title">
          <span>已选数据</span>
          <div class="" @click="removeall()"><i class="el-icon-delete"></i></div>
        </div>
        <div class="userlist userlist2">
          <div
            v-for="item in selecteduserlist"
            :key="item.userId"
            :class="{ usersactive: item.active }"
            class="users"
            @click="addselecteduserlistSP(item)"
            @dblclick="removeone(item)"
          >
            {{ item.realName }}
          </div>
          <div v-if="!selecteduserlist || (selecteduserlist && selecteduserlist.length < 1)" class="userempty">
            暂无已选用户数据
          </div>
        </div>
      </section>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" @click="getdata()">确 定</el-button>
      <el-button size="mini" @click="handleClose()">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { all, queryUserByDeptId } from '@/api/userselect'
import { mapGetters } from 'vuex'
export default {
  props: {
    title: {
      type: String,
      default: '分配用户'
    },
    selectedlist: {
      type: Array,
      default: () => []
    },
    singlechoice: {
      type: Boolean,
      default: false
    }
    // deptId: {
    //   type: Array,
    //   default: () => []
    // }
  },
  data() {
    return {
      userlistOR: [],
      userlist: [],
      userlistSP: [], // 临时储存列表
      selecteduserlist: [],
      selecteduserlistSP: [], // 临时储存列表
      roleName: '',
      treedata: [],
      defaultProps: {
        children: 'list',
        label: 'name'
      },
      defDeptId: [],
      dialogVisible: true
    }
  },
  computed: {
    ...mapGetters('user', ['getdeptId'])
  },
  watch: {
    getdeptId: {
      immediate: true,
      deep: true,
      handler(newVal, oldVal) {
        this.defDeptId = [newVal]
        this.fetchqueryUserByDeptId(newVal)
      }
    },
    selectedlist: {
      immediate: true,
      deep: true,
      handler(newVal, oldVal) {
        if (Array.isArray(newVal) && newVal.length > 0) {
          this.selecteduserlist = newVal
        }
      }
    }
  },
  mounted() {
    this.fetchall()
  },
  methods: {
    fetchall() {
      all()
        .then(res => {
          const resdata = this.deepClone([res.data])
          this.treedata = resdata
        })
        .catch(() => {
          this.loading = false
        })
    },
    fetchqueryUserByDeptId(deptId) {
      if (!deptId) return
      queryUserByDeptId(deptId)
        .then(res => {
          if (res && res.data && Array.isArray(res.data)) {
            this.userlist = res.data
            this.userlistOR = res.data
          } else {
            this.userlist = []
            this.userlistOR = []
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    seachMan() {
      if (this.roleName == '') {
        this.userlist = this.deepClone(this.userlistOR)
        return
      }
      this.userlist = this.userlistOR.filter(item => {
        return item.realName == this.roleName
      })
    },
    adduserlistSP(item) {
      let needpush = true
      const TEMPuserlistSP = this.deepClone(this.userlistSP)
      TEMPuserlistSP.forEach((unit, index) => {
        if (item.userId == unit.userId) {
          TEMPuserlistSP.splice(index, 1)
          needpush = false
        }
      })
      needpush ? TEMPuserlistSP.push(item) : ''
      this.userlistSP = this.deepClone(TEMPuserlistSP)
      // 同步选中
      this.syncUserlist()
    },
    syncUserlist() {
      // 同步界面
      const TEMPuserlistSP = this.deepClone(this.userlistSP)
      const TEMPuserlist = this.deepClone(this.userlist)
      TEMPuserlist.forEach(item => {
        delete item.active
        TEMPuserlistSP.forEach(unit => {
          if (item.userId == unit.userId) {
            item.active = true
          }
        })
      })
      this.userlist = this.deepClone(TEMPuserlist)
    },
    addselecteduserlistSP(item) {
      let needpush = true
      const TEMPselecteduserlistSP = this.deepClone(this.selecteduserlistSP)
      TEMPselecteduserlistSP.forEach((unit, index) => {
        if (item.userId == unit.userId) {
          TEMPselecteduserlistSP.splice(index, 1)
          needpush = false
        }
      })
      needpush ? TEMPselecteduserlistSP.push(item) : ''
      this.selecteduserlistSP = this.deepClone(TEMPselecteduserlistSP)
      // 同步选中
      this.syncSelecteduserlist()
    },
    syncSelecteduserlist() {
      // 同步界面
      const TEMPselecteduserlistSP = this.deepClone(this.selecteduserlistSP)
      const TEMPselecteduserlist = this.deepClone(this.selecteduserlist)
      TEMPselecteduserlist.forEach(item => {
        delete item.active
        TEMPselecteduserlistSP.forEach(unit => {
          if (item.userId == unit.userId) {
            item.active = true
          }
        })
      })
      this.selecteduserlist = this.deepClone(TEMPselecteduserlist)
    },

    pushdata() {
      // 点击右按钮
      const TEMPuserlistSP = this.deepClone(this.userlistSP)
      const TEMPselecteduserlist = this.deepClone(this.selecteduserlist)
      this.selecteduserlist.forEach(item => {
        TEMPuserlistSP.forEach((unit, index) => {
          if (item.userId == unit.userId) {
            TEMPuserlistSP.splice(index, 1)
          }
        })
      })
      TEMPuserlistSP.length > 0 && TEMPselecteduserlist.push(...TEMPuserlistSP)
      this.selecteduserlist = this.deepClone(TEMPselecteduserlist)
      this.userlistSP = []
      // 同步选中
      this.syncUserlist()
    },
    pushone(obj) {
      // 点击右按钮
      const TEMPuserlistSP = this.deepClone([obj])
      const TEMPselecteduserlist = this.deepClone(this.selecteduserlist)
      this.selecteduserlist.forEach(item => {
        TEMPuserlistSP.forEach((unit, index) => {
          if (item.userId == unit.userId) {
            TEMPuserlistSP.splice(index, 1)
          }
        })
      })
      TEMPuserlistSP.length > 0 && TEMPselecteduserlist.push(...TEMPuserlistSP)
      this.selecteduserlist = this.deepClone(TEMPselecteduserlist)
      // 同步选中
      this.syncUserlist()
    },
    removedata() {
      // 点击右按钮
      const TEMPselecteduserlistSP = this.deepClone(this.selecteduserlistSP)
      const TEMPselecteduserlist = this.deepClone(this.selecteduserlist)
      TEMPselecteduserlistSP.forEach(item => {
        TEMPselecteduserlist.forEach((unit, index) => {
          if (item.userId == unit.userId) {
            TEMPselecteduserlist.splice(index, 1)
          }
        })
      })
      this.selecteduserlist = this.deepClone(TEMPselecteduserlist)
      this.selecteduserlistSP = []
      // 同步选中
      this.syncSelecteduserlist()
    },
    removeone(obj) {
      // 点击右按钮
      const TEMPselecteduserlistSP = this.deepClone([obj])
      const TEMPselecteduserlist = this.deepClone(this.selecteduserlist)
      TEMPselecteduserlistSP.forEach(item => {
        TEMPselecteduserlist.forEach((unit, index) => {
          if (item.userId == unit.userId) {
            TEMPselecteduserlist.splice(index, 1)
          }
        })
      })
      this.selecteduserlist = this.deepClone(TEMPselecteduserlist)
      // 同步选中
      this.syncSelecteduserlist()
    },
    removeall() {
      this.selecteduserlist = []
      this.selecteduserlistSP = []
    },
    getdata() {
      if (this.singlechoice && this.selecteduserlist.length !== 1) {
        this.$message({
          message: `只能选择一个用户，当前选择了${this.selecteduserlist.length}个用户`,
          type: 'warning'
        })
        return
      }
      this.$emit('getdata', this.selecteduserlist)
      this.handleClose()
    },
    handleNodeClick(data) {
      this.defDeptId = []
      this.userlistSP = []
      this.fetchqueryUserByDeptId(data.deptId)
    },
    handleClose(done) {
      this.$emit('closeDialog', false)
      done && done()
    }
  }
}
</script>

<style lang="scss" scoped>
// ::v-deep .is-current {
//   background: #5086fc55;
// }
// ::v-deep .is-checked {
//   background: #5086fc55;
// }
.userselect {
  .left {
    width: 47%;
    background: #f8f8f8;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    padding: 10px;
    .search {
      display: flex;
      position: relative;
      margin-bottom: 10px;
      .searchicon {
        font-size: 18px;
        line-height: 32px;
        right: 0px;
        width: 32px;
        position: absolute;
        cursor: pointer;
      }
    }
    .tree {
      width: 100%;
      padding: 15px;
      height: 300px;
      overflow-y: auto;
      background: #ffffff;
      border-radius: 6px;
      border: 1px solid #d9d9d9;
      margin-bottom: 10px;
    }
    .tree-list {
      display: flex;
      line-height: 16px;
    }
    .ismenu {
      width: 16px;
      height: 16px;
      margin: 0 10px 0 5px;
      background: url('icon/org.png');
      background-size: cover;
    }
    .isunit {
      width: 16px;
      height: 16px;
      margin: 0 10px 0 5px;
      background: url('icon/member.png');
      background-size: cover;
    }
  }
  .tooog {
    width: 5.7%;
    display: flex;
    align-items: center;
    > div {
      margin: 0 auto;
    }
    .toleft {
      width: 24px;
      height: 24px;
      background: url('icon/toleft.png');
      background-size: cover;
      margin-bottom: 15px;
      cursor: pointer;
    }
    .toright {
      width: 24px;
      height: 24px;
      cursor: pointer;
      background: url('icon/toright.png');
      background-size: cover;
    }
  }
  .right {
    width: 47%;
    background: #f8f8f8;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    .title {
      display: flex;
      justify-content: space-between;
      padding: 0 15px;
      height: 42px;
      line-height: 42px;
      border-bottom: 1px solid #d9d9d9;
      i {
        cursor: pointer;
      }
    }
  }
  .userlist {
    width: 100%;
    padding: 15px;
    height: 300px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #d9d9d9;
    .userempty {
      width: 100%;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
    .users {
      width: 100%;
      height: 28px;
      line-height: 28px;
      padding: 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .users:hover {
      background: #5086fc66;
    }
    .usersactive {
      background: #5086fc;
      color: #ffffff;
    }
  }
  .userlist2 {
    height: 651px;
    border: none;
  }
}
.width300 {
  width: 300px;
}
::v-deep {
  .el-button {
    width: 120px;
  }
}
.row {
  display: flex;
}
</style>
